import * as echarts from 'echarts/core';
/**
 * 数据分析 人员数据分析(部门分布)——大饼图
 * 
 * **/

const indexEchartsPie3 = (data) => {
    //展示数据
    const optionData = [];

    let legend = [];

    let v = {
        orient: 'vertical',
        right: '30%',
        top: '10%',
        itemGap: 30,
        textStyle: {
            color: '#ffffff',
            fontSize: 12,
        },
        data: [],
    };

    //扇形图颜色数据
    const colorList = ['#D2F35F', '#CC735B', '#3B97F6', '#185D7C', '#4D48DB', '#82D162', '#D04761', '#F1A97D', '#56F1E8', '#953BB2', '#DB4883'];

    //请求的数据
    const resultData = [
        {
            name: '生产制造部',
            value: 95,
        },
        {
            name: '工程技术部',
            value: 27,
        },
        {
            name: '基建部',
            value: 90,
        },
        {
            name: '品质保证部',
            value: 100,
        },
        {
            name: '董办',
            value: 10,
        },
        {
            name: '信息技术部',
            value: 100,
        },
        {
            name: '人力行政部',
            value: 100,
        },
        {
            name: '生产管理部',
            value: 100,
        },
        {
            name: '销售部',
            value: 100,
        },
        {
            name: '财务部',
            value: 40,
        },
        {
            name: '商务部',
            value: 70,
        }
    ];

    let sum = 0;
    resultData.forEach(item => {
        sum += item.value;
    })
    let calc = (val) => {
        return parseFloat(Math.floor((val / sum) * 10000) / 100).toFixed(2)
    };
    resultData.forEach((item, index) => {
        optionData.push({ value: item.value, name: item.name });
        v.data.push(item.name);
        v.formatter = function (r) {
            for (let i = 0; i < resultData.length; i++) {
                if (r === resultData[i].name) {
                    return `{name|${r}}{v1|${resultData[i].value}人}{v2|${calc(resultData[i].value)}%}`
                }
            }
        }
        v.textStyle = {
            rich: {
                name: {
                    fontSize: 12,
                    fontWeight: 400,
                    width: 90,
                    color: '#fff',
                },
                v1: {
                    fontSize: 12,
                    fontWeight: 400,
                    width: 50,
                    color: '#fff',
                    padding:[0,10,0,-10]
                },
                v2: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: '#fff',
                },
            }
        }

        if ((index + 1) % 6 === 0) {
            legend.push(v);
            v = {
                orient: 'vertical',
                right: `${30 - (index * 5.5)}%`,
                top: '10%',
                itemGap: 30,
                textStyle: {
                    color: '#ffffff',
                    fontSize: 12,
                },
                data: [],
            };
        }
    })

    // 将最后一个v对象推入b数组（如果不足6项）
    if (v.data.length > 0) {
        legend.push(v);
    }

    const defaultConfig = {
        title: {
            show: true,
            text: '分布详情', // 当前写死
            top: '45%',
            left: '19.2%',
            textAlign: 'center',
            textStyle: {
                fontSize: '33.62',
                fontWeight: "100",
                fontStyle: "italic",
                color: "#ffffff"
            },
        },
        //你的代码
        legend: legend,
        tooltip: {
            trigger: 'item',
            formatter(params) {
                let res = '';
                const { marker, name, value } = params;
                if (name !== '') {
                    res += `${marker}${name}:${value}`
                }
                return res;
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['60%', '80%'],
                center: ['20%', '50%'],
                label: {
                    show: false,
                    position: 'inside',
                    formatter(item) {
                        if (item.name === '') {
                            return '';
                        }
                        return `${item.value}`;
                    },
                    textStyle: {
                        fontSize: 16,
                        color: '#ffffff'
                    }
                },
                labelLine: {
                    show: false,
                },
                itemStyle: {
                    normal: {
                        color(params) {
                            return colorList[parseInt(params.dataIndex)];
                        }
                    }
                },
                data: optionData,
            },
        ]
    };

    const opt = { ...defaultConfig };
    return opt;
};

export default {
    indexEchartsPie3
};
